<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>余额提现</title>
        <script src="../static/js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../static/js/axios.min.js" type="application/javascript" charset="UTF-8"></script>
        <script src="../static/js/md5.js" type="application/javascript" charset="UTF-8"></script>
        <script src="../static/js/json2.js" type="application/javascript" charset="UTF-8"></script>
        <script src="../static/js/crypto-js.js" type="application/javascript" charset="UTF-8"></script>
        <script src="../static/js/common.js" type="application/javascript" charset="UTF-8"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <!-- 引入 WeUI CDN 链接 -->
        <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
    </head>
    <body>
        <div id="app">
            <div class="weui-navbar" style="align-items: center;">
                <div style="padding-left: 1rem;" @click="back()">返回</div>
                <div class="weui-navbar__item" style="position: initial;">
                    余额提现
                </div>
                <div style="padding-right: 1rem;" @click="cashlist()">提现记录</div>
            </div>
            <div class="top_view">
                <div style="font-size: 1.25rem;">
                    <label>可提现金额:</label>
                    <label style="color: orangered;">{{cash}}</label>
                    <label>元</label>
                </div>
            </div>
            <div class="weui-form__control-area" style="margin: 0;">
                <div class="weui-cells__group weui-cells__group_form">
                    <div class="weui-cells__title">填写提现信息</div>
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><label class="weui-label">真实姓名</label></div>
                            <div class="weui-cell__bd">
                                <input id="js_input" class="weui-input" placeholder="银行卡开户人姓名" v-model="item.name">
                            </div>
                        </div>
                        <div class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><label class="weui-label">电话号码</label></div>
                            <div class="weui-cell__bd">
                                <input id="js_input" class="weui-input" placeholder="填写联系电话" type="number" v-model="item.phone">
                            </div>
                        </div>
                        <div class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><label class="weui-label">开户银行</label></div>
                            <div class="weui-cell__bd">
                                <input id="js_input" class="weui-input" placeholder="填写开户行名称" v-model="item.bankname">
                            </div>
                        </div>
                        <div class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><label class="weui-label">银行卡号</label></div>
                            <div class="weui-cell__bd">
                                <input id="js_input" class="weui-input" type="number" placeholder="填写银行卡号" v-model="item.cardid">
                            </div>
                        </div>
                        <div class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><label class="weui-label">提现金额</label></div>
                            <div class="weui-cell__bd">
                                <input id="js_input" class="weui-input" placeholder="填写提现金额" v-model="item.cash">
                            </div>
                            元
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-form__tips-area" style="margin-top: 1rem;">
                <p class="weui-form__tips">
                    注意事项
                </p>
            </div>
            <div class="weui-form__opr-area" style="margin-top: 1rem;">
                <a href="javascript:" class="weui-btn weui-btn_primary" @click="submit">确定</a>
            </div>
            <div class="js_dialog" id="dialog" style="display: none;" ref="dialog">
                <div class="weui-mask"></div>
                <div class="weui-dialog">
                    <div class="weui-dialog__bd">{{tip}}</div>
                    <div class="weui-dialog__ft">
                        <a href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary" @click="$refs.dialog.style.display='none'">知道了</a>
                    </div>
                </div>
            </div>
            <div ref="loadingToast" style="opacity: 0; display: none;">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <span class="weui-primary-loading weui-primary-loading_transparent weui-icon_toast">
                        <span class="weui-primary-loading__dot"></span>
                    </span>
                    <p class="weui-toast__content">提交中</p>
                </div>
            </div>
        </div>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    text:'Hello World',
                    item:{
                        name:'',
                        phone:'',
                        cardid:'',
                        bankname:'',
                        cash:''
                    },
                    param:{
                        index:1,
                        size:20
                    },
                    cash:0,
                    tip:'',
                    message:''
                },
                methods:{
                    submit:function(){
                        var self = this
                        if(self.item.name==''){
                            self.tip = '开户人姓名不能为空'
                            self.$refs.dialog.style.display = ''
                            return
                        }
                        if(self.item.phone.length!=11){
                            self.tip = '手机号码不正确'
                            self.$refs.dialog.style.display = ''
                            return
                        }
                        if(self.item.bankname==''){
                            self.tip = '开户银行不能为空'
                            self.$refs.dialog.style.display = ''
                            return
                        }
                        if(self.item.cardid==''){
                            self.tip = '银行卡号不能为空'
                            self.$refs.dialog.style.display = ''
                            return
                        }
                        if(self.item.cash==''){
                            self.tip = '提现金额不能为空'
                            self.$refs.dialog.style.display = ''
                            return
                        }
                        self.$refs.loadingToast.style.display = ''
                        var data = JSON.stringify(self.item)
                        console.log(data)
                        data = wb_des(JSON.parse(data),'1982474',true);
                        axios.post('http://127.0.0.1:8080/api/cash/add',data['data'],{
                            headers:data['key']
                        })
                        .then(function (response) {
                            self.$refs.loadingToast.style.display = 'none'
                            let res = JSON.parse(JSON.stringify(response.data))
                            if(res.result == 0){
                                window.location.href = 'success.html'
                            }else{
                                self.tip = res.msg
                                self.$refs.dialog.style.display = ''
                            }
                            console.log(res)
                        })
                        .catch(function (error) {
                            self.$refs.loadingToast.style.display = 'none'
                            console.log(error);
                            alert('请求出错')
                        });
                    },
                    getLastInfo:function(){
                        var self = this
                        axios.post('http://127.0.0.1:8080/api/cash/get_bank_info','',{
                            headers:{"UserID":'1982474',"wechat":"wechat"}
                        })
                        .then(function (response) {
                            let res = JSON.parse(JSON.stringify(response.data))
                            if(res.result == 0){
                                self.item.name = res.data.name
                                self.item.phone = res.data.phone
                                self.item.cardid = res.data.cardid
                                self.item.bankname = res.data.bankname
                                self.cash = res.data.cash
                            }
                            console.log(res)
                        })
                        .catch(function (error) {
                         console.log(error);
                        });
                    },
                    cashlist:function(){
                        window.location.href = 'cashlist.html'
                        // window.location.href = 'http://127.0.0.1:8080/cash/cashlist'
                        
                    },
                    allcash:function(){
                        this.item.cash = this.cash
                    },
                    back:function(){
                        window.history.go(-1);
                    }
                }
            })
        app.getLastInfo()
		</script>
    </body>

    <style type="text/css">
        body {
            margin: 0rem;
            height: 100vh;
            background-color: #F7F7F7;
        }
        .top_view {
            height: 120px;
            background: #fff;
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
</html>
